<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column label="邀请人" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.pid_member_msg}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="被邀请人">
          <template slot-scope="scope">
            <span>{{ scope.row.member_msg }}</span>
<!--            <span>{{ scope.row.addtime | timeFilter }}</span>-->
          </template>
        </el-table-column>
        <el-table-column align="center" label="注册时间">
          <template slot-scope="scope">{{ scope.row.reg_time | timeFilter }}</template>
        </el-table-column>
        <el-table-column align="center" label="资料状态">
          <template slot-scope="scope">
            <span lass="font_warning">{{ scope.row.complete_percent }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核状态">
          <template slot-scope="scope">
            <span lass="font_warning" v-if="scope.row.examine_state == 0">审核中</span>
            <span lass="font_warning" v-if="scope.row.examine_state == 1">审核通过</span>
            <span lass="font_warning" v-if="scope.row.examine_state == 2">拒绝</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="审核时间">
          <template slot-scope="scope" v-if=" scope.row.examinetime <= 0"></template>
          <template slot-scope="scope" v-if=" scope.row.examinetime > 0">{{ scope.row.examinetime | timeFilter }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.examine_state != 0" style="    color: #FFF;background-color: #909399;border-color: #909399;" type="primary" size="small" disabled>审核</el-button>
            <el-button v-if="scope.row.examine_state == 0" style="color: #FFF;background-color: #ff8e50;border-color: #ff8e50;" type="primary" size="small" @click="examines(scope.row)">审核</el-button>
            <el-button style="color:#FFF;background-color: #F56C6C;border-color: #F56C6C;"  type="primary" size="small" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-dialog
        title="邀请审核"
        :visible.sync="dialogFormVisible"
        width="25%"
      >
        <el-form class="common-form" label-width="80px">
          <el-form-item label="审核状态">
            <el-radio-group v-model="setAuditVal">
              <el-radio
                v-for="(item, index) in options_audit"
                :key="index"
                :label="index"
              >
                {{ item }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="setAuditVal == 1" label="原因">
            <el-input v-model="setAuditReason" type="textarea" rows="3" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="fun_set_audit"> 确 定 </el-button>
        </div>
      </el-dialog>
      <div class="spaceline" />
      <el-row :gutter="20" style="width:100%;">
        <el-col :span="20" style="text-align: right;width:100%;">
          <el-pagination
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {inviteRegisterExamine, inviteRegister, inviteRegisterDel, examine} from '@/api/red_envelopes'
import { parseTime } from '@/utils/index'

export default {
  filters: {
    timeFilter(timestamp) {
      return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}:{s}')
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogFormVisible:false,
      total: 0,
      setAuditVal: 0,
      setAuditReason: '',
      currentPage: 1,
      options_audit: ['通过','拒绝'],
      pagesize: 10,
      auditIdarr:0,
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      const param = {
        page: this.currentPage,
        pagesize: this.pagesize
      }
      inviteRegister(param).then(response => {
        this.list = response.data.items
        this.listLoading = false
        this.total = response.data.total
        this.currentPage = response.data.current_page
        this.pagesize = response.data.pagesize
      })
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData()
    },
    fun_set_audit(){
      console.log(this.auditIdarr)
      const params = {
        id: this.auditIdarr,
        audit: this.setAuditVal,
        reason: this.setAuditReason
      }
      inviteRegisterExamine(params).then(response => {
        this.$message.success(response.message)
        this.dialogFormVisible = false
        this.fetchData()
      })
    },
    examines(row){
      console.log(row)
      this.setAuditReason = ''
      this.setAuditVal = 0
      this.auditIdarr = row.id
      this.dialogFormVisible = true
    },
    del(val){
      this
        .$confirm('您确定要将此条记录删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          inviteRegisterDel({'id':val}).then(response => {
            this.$message.success(response.message)
            this.fetchData()
          })
        })
    }
  },
}
</script>
